<template>
  <div>
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div class="logistics-status" v-color="color">{{ startus }}</div>
        <div class="logistics-company">{{ orderInfo.logisticsCompany }}</div>
        <div class="logistics-no">{{ orderInfo.logisticsNo }}</div>
      </div>
    </div>
    <ul class="logistics-info-list">
      <li v-for="item in orderInfo.logisticsInfo" :key="item.id">
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
    <button v-name="orderInfo.role">查看物流详情</button>
  </div>
</template>

<script>
export default {
  props: {
    orderInfo: {
      type: Object,
    },
  },
  data() {
    return {
      startus: "",
      color: "",
    };
  },
  directives: {
    color: {
      inserted(el, binding) {
        el.style.color = binding.value;
      },
      name: {
        inserted(el, binding) {
          if (
            binding.value === "admin" ||
            binding.value === "zhangsan" ||
            binding.value === "lisi"
          ) {
            el.disable = false;
          } else {
            el.disable = true;
          }
        },
      },
    },
  },

  created() {
    if (this.orderInfo.logisticsStatus == 0) {
      this.startus = "未发货";
      this.color = "red";
    } else if (this.orderInfo.logisticsStatus == 1) {
      this.startus = "已发货";
      this.color = "blue";
    } else if (this.orderInfo.logisticsStatus == 2) {
      this.startus = "已签收";
      this.color = "pink";
    } else if (this.orderInfo.logisticsStatus == 3) {
      this.startus = "未签收";
      this.color = "red";
    }
  },
};
</script>

<style>
</style>